<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tree.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tree-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <script type="text/javascript" src="makedata.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
        }

        #wrap>div {
            width: 33%;
            float: left;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- <button id="btn0001">创建</button> -->
    <div id="wrap" class="clearfix">
        <div >
            <div><button onclick="getData()">获取勾选的数据</button></div>
            <ul id="tree1"></ul>
        </div>
        <div>
            <div>
                <button onclick="getData2()">获取勾选的数据</button>
                <button onclick="setData2()">设置勾选的数据</button>
            </div>
            <ul id="tree2"></ul>
        </div> 
        <div>
            <div><button onclick="getData3()">获取勾选的数据</button></div>
            <ul id="tree3"></ul>
        </div>        
    </div>
    <script type="text/javascript">
        var treeObj, treeObj2, treeObj3;


        function setData2(){
            treeObj2.setValue([11,31]);

        }

        function getData(){
           let ret =  treeObj.getCheckData();
           console.log(ret);
           alert(JSON.stringify(ret));
        }

        function getData2(){
           let ret =  treeObj2.getCheckData();
           console.log(ret);
           alert(JSON.stringify(ret));
        }

        function getData3(){
           let ret =  treeObj3.getCheckData();
           console.log(ret);
           alert(JSON.stringify(ret));
        }


        var treeTmp = [
    {
        "id": 4,
        "text": "text_4",
        "data": {
            "attr0": "4-3",
            "attr1": "4-3",
            "attr2": "4-3"
        },
        "children": [            
            {
                "id": "4_11111",
                "text": "child_1",
                "checked": true,
                "data": {}
            },
            {
                "id": 3,
                "text": "text_3",
                "data": {
                    "attr0": "3-3",
                    "attr1": "3-3",
                    "attr2": "3-3"
                },
                "children": [
                    {
                        "id": "3_3000",
                        "text": "child_3",
                        "checked": true,
                        "data": {}
                    },                   
                    {
                        "id": "3_2000",
                        "text": "child_2",
                        "checked": true,
                        "data": {}
                    },
                    {
                        "id": 2,
                        "text": "text_2",
                        "data": {
                            "attr0": "2-3",
                            "attr1": "2-3",
                            "attr2": "2-3"
                        },
                        "children": [
                            
                            {
                                "id": "2_1112311",
                                "text": "child_1",
                                "checked": true,
                                "data": {}
                            },
                            {
                                "id": 1,
                                "text": "text_23231",
                                "data": {
                                    "attr0": "1-3",
                                    "attr1": "1-3",
                                    "attr2": "1-3"
                                },
                                "children": [
                                    {
                                        "id": 0,
                                        "text": "text_0",
                                        "data": {
                                            "attr0": "0-3",
                                            "attr1": "0-3",
                                            "attr2": "0-3"
                                        }
                                    }
                                ]
                            },
                            {
                                "id": "2_01111",
                                "text": "child_110",
                                "checked": true,
                                "data": {}
                            }
                        ]
                    },
                    {
                        "id": "3_1000",
                        "text": "child_1",
                        "checked": true,
                        "data": {}
                    },
                    {
                        "id": 2,
                        "text": "text_2",
                        "data": {
                            "attr0": "2-3",
                            "attr1": "2-3",
                            "attr2": "2-3"
                        },
                        "children": [
                            {
                                "id": 1,
                                "text": "text_1",
                                "data": {
                                    "attr0": "1-3",
                                    "attr1": "1-3",
                                    "attr2": "1-3"
                                },
                                "children": [
                                    {
                                        "id": 0,
                                        "text": "text_0",
                                        "data": {
                                            "attr0": "0-3",
                                            "attr1": "0-3",
                                            "attr2": "0-3"
                                        }
                                    }
                                ]
                            },
                            {
                                "id": "2_11111",
                                "text": "child_1",
                                "checked": true,
                                "data": {}
                            },
                            {
                                "id": 1,
                                "text": "text_1",
                                "data": {
                                    "attr0": "1-3",
                                    "attr1": "1-3",
                                    "attr2": "1-3"
                                },
                                "children": [
                                    {
                                        "id": 0,
                                        "text": "text_0",
                                        "data": {
                                            "attr0": "0-3",
                                            "attr1": "0-3",
                                            "attr2": "0-3"
                                        }
                                    }
                                ]
                            },
                            {
                                "id": "2_01111",
                                "text": "child_0",
                                "checked": true,
                                "data": {}
                            }
                        ]
                    }
                ]
            },
            {
                "id": "4_01111",
                "text": "child_9990",
                "checked": true,
                "data": {}
            }
        ]
    },
    {
        "id": 999999,
        "text": "中国结",
        "data": {},
        "children": [
            {
                "id": "sdfjdkl",
                "text": "圣诞节福利看",
                "data": {
                    "mmmmm": "sdfljdfjk"
                },
                "children": []
            },
            {
                "id": "09998",
                "text": "水电费来",
                "data": {
                    "aaaa": "sdfljdfjk"
                },
                "children": [
                    {
                        "id": "123123",
                        "text": "df水电费进口量",
                        "data": {
                            "test11": "sdfljdfjk"
                        },
                        "children": [
                            {
                                "id": 999999,
                                "text": "中国结",
                                "closed": true,
                                "data": {
                                    "test": "sdfljdfjk"
                                },
                                "children": [
                                    {
                                        "id": "sdfjdkl",
                                        "text": "圣诞节福利看",
                                        "data": {
                                            "bbdsf": "sdfljdfjk"
                                        }
                                    },
                                    {
                                        "id": "09998",
                                        "text": "水电费来",
                                        "data": {},
                                        "children": [
                                            {
                                                "id": "123123",
                                                "text": "df水电费进口量",
                                                "data": {
                                                    "aaaa": "sdfljdfjk"
                                                }
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
];


        function pageLoaded() {
            let data =  getTreeData(5, 3);
            let start = new Date();
            
            console.log(JSON.stringify(data));

            console.log($B);
            treeObj = new $B.Tree("tree1", {
                nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                chkEmptyIcon: 'fa-check-empty',            //不选
                chkAllIcon: 'fa-check',            //全选
                chkSomeIcon: 'fa-minus-squared',              //部分选 ***/      
                fontIconColor: '#8E03F5',
                showLine: true,
                plainStyle: false,
                data: data,
                checkbox: true,
                toolbarHide:'auto',
                clickCheck:true,
                tree2list:true,
                //canClickParent:false,
                //checkSingle:true,
                // disChecked:true,
                toolbar: [
                    {
                        color: '#C16FF0',
                        text: '测试',
                        showText:false,
                        iconCls: 'fa-print',
                        click: function (e) {
                            console.log(e.data);
                            alert("测试测试测试");
                        }
                    },
                    {
                        color: '#34E0B9',
                        text: '按钮2',
                        showText:true,
                        iconCls: 'fa-male-1',
                        click: function (e) {
                            console.log(e.data);
                            alert("按钮2");
                        }
                    }
                ],
                onItemCreated:function(li, data){
                   // console.log(li);
                },
                onClick:function(e){
                    console.log("on click");
                    console.log( e.data);
                },
                onChecked:function(data,ischecked){
                    console.log("onChecked ");
                    console.log(JSON.stringify(data));
                }
            });
            console.log("create ok >>>>>>>>>>>>>>");

            data  = [{
                id: 1,
                text: '服务器编程',
                children: [{
                    id: 11,               
                    text: 'java'
                }, {
                    id: 12,
                    text: 'c#'
                }, {
                    id: 13,
                    text: 'nodejs'
                }]
            }, {
                id: 2,
                text: '前端编程',
                children: [{
                    id: 21,                
                    text: 'html/css'
                }, {
                    id: 22,
                    text: 'javascript'
                }]
            }, {
                id: 3,
                text: '产品设计',
                children: [{
                    id: 31,                
                    text: '需求调研'
                }, {
                    id: 32,
                    text: '原型设计'
                }]
            }];//'数据'


            treeObj2 = new $B.Tree("tree2", {               
                showLine: true,
                plainStyle: false,
                data: data,                
                checkbox: true,
                toolbarHide:'auto',
                clickCheck:true,
                tree2list:true,
                onClick:function(e){
                    console.log("on click");
                    console.log( e.data);
                },
                onChecked:function(data,ischecked){
                    console.log("onChecked ");
                    console.log(JSON.stringify(data));
                }
            });

         
            data = getTreeData(5, 5);//'数据'

            console.log("simple tree.........");
            treeObj3 = new $B.Tree("tree3", {               
                showLine: true,
                plainStyle: true,
                url: "org.json",                
                checkbox: false,
                toolbarHide:'auto',
                clickCheck:true,
                tree2list:false,
                onClick:function(e){
                    console.log("on click");
                    console.log( e.data);
                },
                onChecked:function(data,ischecked){
                    console.log("onChecked ");
                    console.log(JSON.stringify(data));
                }
            });
        };
        var methodsObject = {
            test: function (pr) {
                alert(JSON.stringify(pr));
            }
        };
        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>